<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link href='../../assets/common/libs/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' />
    <link href="../../assets/common/libs/fullcalendar-3.4.0/fullcalendar.print.min.css" rel='stylesheet' media='print' />

    <link rel="stylesheet" href="../../assets/common/libs/layui/css/layui.css">
    <script src="../../assets/common/libs/layui/layui.all.js"></script>

    <script src='../../assets/common/libs/fullcalendar-3.4.0/lib/moment.min.js'></script>
    <script src='../../assets/common/libs/fullcalendar-3.4.0/lib/jquery.min.js'></script>
    <script src='../../assets/common/libs/fullcalendar-3.4.0/fullcalendar.min.js'></script>
    <script type="text/javascript" src="${ctxPath}/assets/common/js/baseMethod.js"></script>

    @/* 加入contextPath属性和session超时的配置 */
    <script type="text/javascript">
        var Feng = {
            ctxPath: "${ctxPath}",
            version: '${constants.getReleaseVersion()}'
        };
    </script>

    <script>

        $(document).ready(function() {
           var sformId= $("#sformId").val();
           var sframeId=$("#sframeId").val();
            var startDate='';
            var stopDate='';





                    $('#calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listWeek'
                        },
                        defaultDate: new Date(),
                        defaultView:'agendaWeek', //默认视图
                      /*  editable: true,//可以被编辑*/
                        selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
                        weekNumbers:true,//显示周数
                        firstDay: 1,//设置每周第一天，数字int型，默认0（周日）
                        timezone: 'Asia/Chita',//时区
                        navLinks: true, // can click day/week names to navigate views
                        eventLimit: true, // allow "more" link when too many events

                        //加载数据
                        events: function(start, end, timezone, callback) {
                            var date=this.getDate().format('MM-dd hh:MM:ss');
                            $.post({
                                url:"/myScheduleForm/checkScheduleForm?sformId="+sformId,
                                dataType: 'json',
                                data: {
                                    date:date
                                },
                                success:function (data) {

                                    var events = [];
                                     startDate=data.scheduleForm.scheduleFrame.startDate;
                                     stopDate=data.scheduleForm.scheduleFrame.stopDate;


                                    for (var i = 0; i < data.scheduleFormItems.length;i++) {

                                        var startTime=createTime(data.scheduleFormItems[i].startTime);
                                        var stopTime=createTime(data.scheduleFormItems[i].stopTime);
                                        var sformItemName=data.scheduleFormItems[i].sformItemName;
                                        var sformItemId1=data.scheduleFormItems[i].sformItemId;


                                        events.push({
                                            id:sformItemId1,
                                            title: sformItemName,
                                            start: startTime,
                                            end:stopTime
                                        });

                                    }
                                    callback(events);
                                },
                            });
                        },
                        eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
                           var stratTime= createTime(event.start);
                           var stopTime=createTime(event.end);;
                            layer.tips(event.title+"\t\t"+stratTime+"-"+stopTime, this);
                        },
                        eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
                            var index = layer.tips();
                            layer.close(index);
                        },


                        selectAllow : function(clickInfo) {//禁止点击的控制,是否允许点击false不让点击，  将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。
                            var start = clickInfo.start.unix();//获取点击的开始时间
                            console.log("点击是否允点击");
                            //如果大于当前时间就让点击，否则就不让点击，提示

                            if(clickInfo.start >= startDate&&clickInfo.start<=stopDate){
                                return true;
                            }



                            //不让点击了 提示
                            layer.msg("选择的时间不在该日程表范围内，请重新选择！");

                            return false;
                        },
                        select:function(start, end, jsEvent) {  //点击日历上的某个时间触发的函数

                           var sformItemDate= createTime(start).split(" ")[0];


                            /*
                            执行顺序，先执行selectAllow:判断是否可以点击
                            然后执行select:点击了时间空间出发的事件，这两个控件其实感觉在上边的那个里边写逻辑就可以
                            如果可以执行的事件，就在上边那个里边直接写，不可以执行的，就直接提示反馈fase，这样就不可以点击了。
                             */
                            /*layer.msg("点击时间控件");*/
                            layer.open({
                                type:2,
                                area: ['800px', '450px'],
                                title: '添加日程项',
                                content: Feng.ctxPath + '/myScheduleFormItem/createSformItem?sframeId='+sframeId+'&sformId='+sformId+'&sformItemDate='+sformItemDate,
                            });
                        },
                        eventClick: function(eventObj) {//点击日期控件上显示的事件触发的事件



                          var sformItemId=eventObj.id;
                            layer.open({
                                type:2,
                                area: ['800px', '450px'],
                                title: '修改该日程项',
                                content: Feng.ctxPath + '/myScheduleFormItem/loadUpdateSformItem?sformItemId='+sformItemId+'+&sframeId='+sframeId+'&sformId='+sformId,
                            });
                        },

                    });


        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

    <div class="layui-inline layui-col-md3">
        <label class="layui-form-label">日程表名称</label>
        <div class="layui-input-block">
            <input type="text" id="sformId" value="${sformIdInt}" hidden>
            <input type="text" id="sframeId" value="${sframeId}" hidden>
            <input type="text" name="sformName" id="sformName" lay-verify="sformName" disabled autocomplete="off" class="layui-input" value="${sformName}">
        </div>
    </div>
    <div class="layui-inline layui-col-md6">
        <label class="layui-form-label">日程表时间</label>
        <div class="layui-input-block">
            <input type="text" name="sformDate" id="sformDate" lay-verify="sformDate" disabled autocomplete="off" class="layui-input" value="${dateAll}">
        </div>
    </div>




</div>

<div id='calendar'></div>

</body>
</html>
